<script setup>
import router from "@/router";
import {ref} from "vue";
import axios from "axios";
import config from '@/utils/GlobalConfig'
import {ElMessage, ElMessageBox} from "element-plus";
import TitleBar from "@/components/TitleBar.vue";
function toLogin(){
  router.push('./')
}

let username = ref('')
let password = ref('')
let password1= ref('')
function register(){
  if(username.value==''){
    ElMessage({
      message: '请输入账号',
      type: 'warning',
    })
    return
  }
  if(password.value==''){
    ElMessage({
      message: '请输入密码',
      type: 'warning',
    })
    return
  }
  if(password1.value==''){
    ElMessage({
      message: '请输入密码',
      type: 'warning',
    })
    return
  }
  if(password.value!==password1.value){
    ElMessage({
      message: '两次密码不一致',
      type: 'warning',
    })
    return
  }

  axios({
    method:'post',
    url:config.webService+'user/register',
    data:{username:username.value,password: password.value }
  }).then(res => {
    if(res.data ===1){
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      toLogin()
    }else{
      ElMessageBox.confirm(
          '注册失败',
          '提示',
          {
            confirmButtonText: '确认',
            showCancelButton: false,
            type: 'error',
          }
      ).then(() => {})
    }
  }).catch(e => {
    console.log(e)
  })


}
</script>

<template>
  <title-bar></title-bar>

  <div class="main-body"></div>

  <div class="login_box">
    <h2>注册页面</h2>
    <div style="margin-bottom: 10px">
      用&nbsp;户&nbsp;名&nbsp;<input type="text" style="margin-right: 5px" v-model="username" placeholder="请输入用户名">
    </div>
    <div style="margin-bottom: 10px">
      密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码<input type="password" v-model="password"  placeholder="请输入密码">
    </div>
    <div style="margin-bottom: 10px">
      确认密码<input type="password" v-model="password1"  placeholder="请输入密码">
    </div>
    <el-button style="margin-top: 15px;width: 100px;letter-spacing: 3px;" type="" @click="register">注册</el-button>

    <div style="position: absolute;bottom: 10px;right: 10px;cursor: pointer;font-size: 14px;" @click="toLogin">
      登录 <img src="@/assets/image/UI/arrow.png" style="width: 18px;vertical-align: middle;padding-top: 7px;margin-left: -5px;" alt="">
    </div>
  </div>

</template>

<style scoped>
.title {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.12);
  width: 100%;
}
.title img{
  padding: 10px 0;
  width: 40%;
}

.login_box {
  width: 20%;
  height: 300px;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
  background: #00daffb5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
}
input {
  border: 0;
  width: 50%;
  font-size: 15px;
  background: transparent;
  border-bottom: 2px solid #3e2c2c90;
  padding: 5px 10px;
  outline: none;
  margin: 12px 10px;
}

.main-body{
  background: url("@/assets/image/UI/bg.jpg") no-repeat;

  background-size: 100% 100%;
  width: 100vw;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100vh;
  right: 0;
}
</style>